<div
  class="window-switcher__item"
  [ngClass]="{
    'window-switcher__item--active': window()?.windowId === activeWindowId(),
  }"
  (click)="onClickWindow()"
  (dblclick)="onDoubleClick()"
>
  @switch (iconState()) {
    @case ('is-editing') {
      <app-icon name="pencil" />
    }
    @case ('in-collection') {
      <app-icon
        name="folder"
        nz-tooltip
        [nzTooltipTitle]="'COLLECTION_OPEN_QUERY_TOOLTIP' | translate"
        nzTooltipPlacement="bottom"
      />
    }
    @case ('is-loading') {
      <app-icon name="loader" class="anim anim-rotate" />
    }
    @default {
      <app-icon name="file" class="window-switcher__subdued" />
    }
  }
  <!-- TODO: Switch out for input element when editing -->
  <div
    #wTitle
    class="window-switcher__input"
    [ngClass]="{
      'window-switcher__input--editing': isEditing(),
    }"
    [attr.contenteditable]="isEditing()"
    (blur)="saveWindowNameChange.emit(wTitle.innerText)"
    (keydown.enter)="saveWindowNameChange.emit(wTitle.innerText)"
  >
    {{ window()?.layout?.title || '' }}
  </div>
  @if (isWindowUnsaved()) {
    <span class="window-switcher__unsaved-indicator"> * </span>
  }
  @if (isClosable()) {
    <div
      track-id="close_window_tab"
      class="window-switcher__close"
      (click)="closeWindowChange.emit()"
    >
      &#x00D7;
    </div>
  }
</div>
